<script setup>
import { newRandomUid, deepClone } from "@/utils";

const props = defineProps({
  config: {
    type: Object,
    required: true,
  },
  name: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  info: {
    type: Object,
  },
});

const emits = defineEmits(["update:config", "change", "append"]);

const form = ref({
  $removeable: false,
  $size: { width: 375, height: 300 },
  $position: { left: 0, top: 20 }
});

const detail = computed({
  get: () => {
    return Object.assign({}, form.value, props.config);
  },
  set: (val) => {
    emits("update:config", val);
    emits("change", val);
  },
});

const initConfig = () => {
  if (!detail.value.$pageFlag) {
    detail.value.$pageFlag = `Login-${newRandomUid()}`;
  }
  // console.log('[ props.info.children ]', deepClone(props.info))
  // let login = (props.info.children || []).find(
  //   (item) => item.type == 'Login'
  // );
  // console.log('[ login ]', login)
  // if (!login) {
  //   emits("append", {
  //     uid: newRandomUid(),
  //     type: "Login",
  //     name: "登录",
  //     pageConfig: {
  //       $removeable: false,
  //     },
  //   });
  // }
  console.log('[ props ]', props.info)
  let phoneInput = (props.info.children || []).find(
    (item) => (item.type === "InputLogin" && item.pageConfig.iptType == 'phone')
  );
  if (!phoneInput) {
    emits("append", {
      uid: newRandomUid(),
      type: "InputLogin",
      name: "手机号输入框",
      pageConfig: {
        $removeable: false,
        label: '手机号',
        $size: { width: 375, height: 50 },
        type: 'tel',
        iptType: 'phone',
      },
    });
  }


  let VerCode = (props.info.children || []).find(
    (item) => (item.type === "InputLogin" && item.pageConfig.iptType == 'smsCode')
  );
  if (!VerCode) {
    emits("append", {
      uid: newRandomUid(),
      type: "InputLogin",
      name: "验证码输入框",
      pageConfig: {
        $removeable: false,
        label: '验证码',
        $size: { width: 230, height: 50 },
        $position: { top: 80, left: 0 },
        iptType: 'smsCode',
        type: 'tel'
      },
    });
  }

  let getVerCode = (props.info.children || []).find(
    (item) => (item.type === "ButtonLogin" && item.pageConfig.btnType == 'smsCode')
  );
  if (!getVerCode) {
    emits("append", {
      uid: newRandomUid(),
      type: "ButtonLogin",
      name: "获取验证码",
      pageConfig: {
        $removeable: false,
        text: '获取验证码',
        $size: { width: 105, height: 50 },
        $position: { top: 80, left: 250 },
        btnType: 'smsCode',
      },
    });
  }

  let loginButton = (props.info.children || []).find(
    (item) => (item.type === "ButtonLogin" && item.pageConfig.btnType == 'login')
  );
  if (!loginButton) {
    emits("append", {
      uid: newRandomUid(),
      type: "ButtonLogin",
      name: "登录",
      pageConfig: {
        $removeable: false,
        text: '登录',
        $position: { top: 160, left: 80 },
        btnType: 'login',
      },
    });
  }
  // let pool = (props.info.children || []).find(
  //   (item) => item.type === "PrizePool"
  // );
  // if (!pool) {
  //   emits("append", {
  //     uid: newRandomUid(),
  //     type: "PrizePool",
  //     name: "奖池",
  //     pageConfig: {
  //       $removeable: true,
  //     },
  //   });
  // }
  console.log('[ props.info.children ]', props.info.children)
};

const onChange = (val) => {
  detail.value = detail.value;
};

onMounted(() => {
  nextTick(() => {
    initConfig();
    onChange();
  });
});
</script>
<template>
  <el-form :model="detail" label-width="auto" :disabled="disabled"> </el-form>
</template>
